let unIpt = document.querySelector('#unIpt');
let pwIpt = document.querySelector('#pwIpt');
let btn = document.querySelector('#btn');
let Name = document.querySelector('#Name');
let sex = document.querySelector('#sex');

let unIptFlage = false;
let pwIptFlage = false;
let NameFlage = false;
let sexFlage = false;

let agree = document.querySelector('.agree');

// 姓名聚焦
Name.onfocus = function () {
    this.nextElementSibling.innerHTML = '请输入您的姓名';
    this.nextElementSibling.style.color = 'rgb(219, 159, 29)';
};
//姓名失焦
Name.onblur = function () {
    let NameVal = Name.value;
    let Nameregular = /^[\s\S]*.*[^\s][\s\S]*$/;
    if (Nameregular.test(NameVal)) {
        this.nextElementSibling.innerHTML = '√';
        this.nextElementSibling.style.color = 'green';
        NameFlage = true;
    } else {
        this.nextElementSibling.innerHTML = '！ 请输入您的姓名';
        this.nextElementSibling.style.color = 'red';
    }
};

// 性别失焦
sex.onblur = function () {
    let sexVal = sex.value;
    console.log(sexVal);
    if (sexVal == '男') {
        this.nextElementSibling.innerHTML = '√';
        this.nextElementSibling.style.color = 'green';
        sexFlage = true;
    } else if (sexVal == '女') {
        this.nextElementSibling.innerHTML = '√';
        this.nextElementSibling.style.color = 'green';
        sexFlage = true;
    } else {
        this.nextElementSibling.innerHTML = '! ';
        this.nextElementSibling.style.color = 'red';
    }
};
//账号聚焦事件
unIpt.onfocus = function () {
    this.nextElementSibling.innerHTML = '账号格式为：6~18个字符，可使用数字字母下划线，(不可为空)';
    this.nextElementSibling.style.color = 'rgb(219, 159, 29)';
};

// 账号失焦事件
unIpt.onblur = async function () {
    let unIptVal = unIpt.value;
    let uniptregular = /\w{5,17}$/;
    if (uniptregular.test(unIptVal)) {
        this.nextElementSibling.innerHTML = `√`;
        this.nextElementSibling.style.color = `green`;
        let url = `http://jx.xuzhixiang.top/ap/api/checkname.php?username=1`;
        let r = await axios.get(url, { params: { username: unIptVal } });
        let data = r.data;
        if (data.code == 1) {
            this.nextElementSibling.innerHTML = '√';
            this.nextElementSibling.style.color = 'green';
            unIptFlage = true;
        } else {
            this.nextElementSibling.innerHTML = '！ 用户名已存在';
            this.nextElementSibling.style.color = 'red';
        }
    } else {
        this.nextElementSibling.innerHTML = '！ 您设置的账号格式不正确';
        this.nextElementSibling.style.color = 'red';
    }
};

// 密码聚焦
pwIpt.onfocus = function () {
    this.nextElementSibling.innerHTML = '密码格式为3~18位非空数字';
    this.nextElementSibling.style.color = 'rgb(219, 159, 29)';
};

// 密码失焦
pwIpt.onblur = function () {
    let pwIptRegular = /^\S{3,18}$/;
    let pwIptVal = pwIpt.value;
    if (pwIptRegular.test(pwIptVal)) {
        this.nextElementSibling.innerHTML = '√';
        this.nextElementSibling.style.color = 'green';
        pwIptFlage = true;
    } else {
        this.nextElementSibling.innerHTML = '！ 您设置的密码格式不符合，请重新设置';
        this.nextElementSibling.style.color = 'red';
    }
};

//加入 按钮点击事件
btn.onclick = async function () {
    let unIptVal = unIpt.value;
    let pwIptVal = pwIpt.value;
    let sexVal = sex.value;
    let NameVal = Name.value;
    if (unIptFlage && pwIptFlage && agree.checked && NameFlage && sexFlage) {
        let url = 'http://jx.xuzhixiang.top/ap/api/reg.php';
        let username = unIptVal;
        let password = pwIptVal;
        let r = await axios.get(url, { params: { username, password } });
        alert('恭喜您！成功加入 RNW 会员俱乐部！');

        // localStorage.setItem('userName', NameVal);
        // localStorage.setItem('userSex', sexVal);

        location.href = 'login.html';
    } else if (agree.checked == false) {
        alert(
            '请阅读并同意《RNW会员协议》及《RNW会员俱乐部个人信息保护政策》!'
        );
    } else if (NameFlage == false) {
        alert('请输入您的姓名');
    } else if (sexFlage == false) {
        alert('请选择对您的称谓');
    } else {
        alert('注册失败，请您检查用户名或密码格式是否正确');
    }
};
